<template>
  <view class="main">
    <view class="pay-card">
      <xxicon
        class="ico"
        color="#333"
        size="80"
        type="closeempty"
        @click="returnBack"
      ></xxicon>
      <view class="total">
        <view class="tag">￥</view><view class="num">{{ total }} </view
        ><view class="tag2">元</view>
      </view>
      <view class="desc">收款编号：{{ sn }}</view>
      <view class="desc">费用类目：{{ desc }}</view>
      <button type="primary" @click="callPayment">确定支付</button>
    </view>
  </view>
</template>

<script>
import xxicon from "../../components/xxicon/xxicon.vue";
export default {
  components: { xxicon },
  data() {
    return {
      desc: "",
      total: "",
      sn: "",
      pagePath: "",
    };
  },
  created() {
    console.log("bbbbbbbbbbbbbbb");
  },
  onLoad(opt) {
    this.desc = opt.desc;
    this.total = opt.total;
    this.sn = opt.sn;
    this.pagePath = `pages/pay/index?total=${opt.total}&desc=${opt.desc}&sn=${opt.sn}`;
  },
  mounted() {
    console.log("ccccccccccccc");
  },

  methods: {
    returnBack() {
      this.$back();
    },
    async uLogin() {
      return new Promise((resolve, reject) => {
        uni.login({
          provider: "weixin",
          success: (res) => {
            resolve(res);
          },
          fail: (err) => {
            reject("授权登录失败：" + JSON.stringify(err));
          },
        });
      });
    },
    guid() {
      const R = function () {
        return ((Math.random() * 0xfffff) | 0).toString(16);
      };
      return `${R()}${R()}${R()}${R()}`;
    },
    echo() {
      // 支付成功，回复服务器
      const _api = "https://ser.lanhuasoft.com/api/Pay/SuccessPay";
      this.$request(_api, { p: this.pagePath }, "post").then((res) => {
        this.$back();
      });
    },
    callPayment() {
      this.uLogin()
        .then((res) => {
          // 1、携授权 codes 创建支付订单，并返回二次签名
          const _api = "https://ser.lanhuasoft.com/api/Pay/CreatePayOrder";
          return this.$request(
            _api,
            {
              codes: res.code,
              total: this.total,
              description: this.desc,
              out_trade_no: this.sn,
            },
            "post"
          );
        })
        .then((res) => {
          // 2、拉起支付
          let R = res.data.data;
          console.log(R);
          wx.requestPayment({
            timeStamp: R["timeStamp"],
            nonceStr: R["nonceStr"],
            package: R["package"],
            paySign: R["paySign"],
            signType: "RSA",
            success: (res) => {
              // 3.1、支付成功
              this.echo();

              // console.log("success:" + JSON.stringify(res));
            },
            fail: (err) => {
              this.$alert(JSON.stringify(err));
              // 3.1、支付失败
              // console.log("fail:" + JSON.stringify(err));
            },
          });
        })
        .catch((err) => {
          console.log("err====:", err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  .pay-card {
    position: relative;
    box-sizing: border-box;
    border-radius: 10px;
    z-index: 888;
    width: 90%;
    padding: 20px 20px;
    height: 200px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background: #eee;
    .ico {
      position: absolute;
      right: 2px;
      top: 2px;
    }
    .desc {
      font-size: 16px;
      font-weight: bold;
      color: #555;
      margin-bottom: 10px;
    }
    .total {
      margin: 0 0 10px 0;
      width: 100%;
      color: #444;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      .tag {
        font-size: 22px;
      }
      .num {
        font-size: 32px;
        font-weight: bold;
        padding: 0 6px 0 1px;
      }

      .tag2 {
        font-size: 30px;
        font-weight: bold;
      }
    }
  }
}
</style>
